<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    body {
      margin: 0;
      color: #444;
      background: #ffff33;
      font: 300 18px/18px Roboto, sans-serif;
    }

    *,
    :after,
    :before {
      box-sizing: border-box
    }

    .pull-left {
      float: left
    }

    .pull-right {
      float: right
    }

    .clearfix:after,
    .clearfix:before {
      content: '';
      display: table
    }

    .clearfix:after {
      clear: both;
      display: block
    }

    .halloween .head .skull:before,
    .halloween .head .skull:after,
    .halloween .eyes .eye:before,
    .halloween .body:before,
    .halloween .body:after,
    .halloween .legs:before {
      content: '';
      position: absolute;
    }

    .halloween {
      top: 50%;
      left: 50%;
      width: 30px;
      height: 44px;
      position: fixed;
      margin-top: -22px;
      margin-left: -15px;
      animation: move 3s infinite;
    }

    .halloween .head {
      z-index: 1;
      width: 25px;
      height: 25px;
      background: #444;
      border-radius: 50%;
      position: relative;
    }

    .halloween .head .skull {
      left: 2px;
      bottom: 2px;
      width: 16px;
      height: 16px;
      color: #f9f9f9;
      border-radius: 50%;
      background: #f9f9f9;
      position: absolute;
      animation: skull 3s infinite;
    }

    .halloween .head .skull:before {
      top: 9px;
      width: 0;
      left: 50%;
      height: 0;
      z-index: 1;
      margin-left: -2px;
      border: 2px solid transparent;
      border-bottom: 2px solid #444;
    }

    .halloween .head .skull:after {
      top: 14px;
      left: 50%;
      width: 1px;
      height: 4px;
      margin-left: -1px;
      background: #f9f9f9;
      box-shadow: 2px 0, -2px 0, 4px 0, -4px 0,
        -3px -2px, -1px -2px, 1px -2px, 3px -2px
    }

    .halloween .eyes {
      width: inherit;
      height: inherit;
      overflow: hidden;
      border-radius: 50%;
      position: relative;
    }

    .halloween .eyes .eye {
      top: 5px;
      width: 5px;
      height: 5px;
      position: absolute;
      border-radius: 50%;
      background: #f8cd22;
      border: 1px solid #444;
      border-right: 2px solid #444;
    }

    .halloween .eyes .eye:before {
      top: -1px;
      left: -1px;
      width: 5px;
      height: 3px;
      background: #f9f9f9;
      border-radius: 5px 5px 0 0;
      animation: eyes 3s infinite;
    }

    .halloween .eyes .eye.eye-left {
      left: 1px;
    }

    .halloween .eyes .eye.eye-right {
      right: 1px;
    }

    .halloween .body {
      top: -3px;
      width: 24px;
      height: 17px;
      background: #444;
      position: relative;
      border-radius: 10px 10px 2px 2px;
    }

    .halloween .body:before,
    .halloween .body:after {
      top: 3px;
      width: 4px;
      height: 12px;
      background: #444;
    }

    .halloween .body:before {
      left: -1px;
      border-radius: 100% 0 0 2px;
      transform: rotate(10deg);
      animation: hand-left 3s infinite;
    }

    .halloween .body:after {
      right: -1px;
      border-radius: 0 100% 2px 0;
      transform: rotate(-10deg);
      animation: hand-right 3s infinite;
    }

    .halloween .legs {
      top: -3px;
      left: 50%;
      width: 21px;
      height: 10px;
      overflow: hidden;
      margin-left: -13px;
      position: relative;
      border-bottom: 1px solid rgba(0, 0, 0, .2);
    }

    .halloween .legs:before {
      top: 0;
      left: -7px;
      width: 60px;
      height: 10px;
      background-image: linear-gradient(-495deg, #444 4px, transparent 0), linear-gradient(-45deg, transparent 4px, #444 0);
      background-size: 4px 8px;
      background-repeat: repeat-x;
      animation: legs 3s infinite;
    }

    @keyframes move {
      0% {
        transform: translateX(0)
      }

      50% {
        transform: translateX(15px)
      }

      100% {
        transform: translateX(0)
      }
    }

    @keyframes skull {
      0% {
        transform: translate(0, 0)
      }

      25% {
        transform: translate(2px, 1px)
      }

      75% {
        transform: translate(3px, -1px)
      }

      100% {
        transform: translate(0, 0)
      }
    }

    @keyframes eyes {
      0% {
        top: -5px;
        border-radius: 50%;
      }

      50% {
        top: -1px;
        border-radius: 5px 5px 0 0;
      }

      100% {
        top: -5px;
        border-radius: 50%;
      }
    }

    @keyframes legs {
      0% {
        left: -7px;
      }

      50% {
        left: -25px;
      }

      100% {
        left: -7px;
      }
    }

    @keyframes hand-left {
      0% {
        left: 1px;
      }

      50% {
        left: -2px;
      }

      100% {
        left: 1px;
      }
    }

    @keyframes hand-right {
      0% {
        right: 1px;
      }

      50% {
        right: -2px;
      }

      100% {
        right: 1px;
      }
    }
  </style>
</head>

<body>
  <div class="halloween">
    <div class="head">
      <div class="skull">
        <div class="eyes">
          <div class="eye eye-left"></div>
          <div class="eye eye-right"></div>
        </div>
      </div>
    </div>
    <div class="body"></div>
    <div class="legs"></div>
  </div>
</body>

</html>